<template>
  <a-modal v-model="visible" title="调价记录" @ok="handleOk" width="800px">
    <!-- 开始时间，结束时间 -->
    <div style="margin-bottom:20px">
      <a-input-group compact>
        操作时间
        <a-date-picker placeholder="开始日期" size="small" /> -
        <a-date-picker placeholder="结束日期" size="small" />

       <span style="float:right">
            <a-button type="primary" style="margin-right:10px">
        搜索
      </a-button>
      <a-button  style="margin-right:10px">重置</a-button>
       </span>
      </a-input-group>
    </div>

    <!-- 表格显示内容 -->
    <a-table :columns="columns" :data-source="data" :pagination="false">
    </a-table>
    
     <div class="pagDevice">
         <a-pagination 
         size="small" 
         :total="50"
         :show-total="(total, range) => `${range[0]}-${range[1]} 共 ${total} 条`"
        :page-size="20"
        :default-current="1"
         show-size-changer show-quick-jumper />
     </div>
     <!-- 自定义页脚 -->
     <template slot="footer">
         <a-button key="back" @click="handleCancel">
          返回
        </a-button>
     </template>
  </a-modal>
</template>
<script>
const columns = [
  {
    title: '操作时间',
    dataIndex: 'operationTime',
    key: 'aoperationTimege',
    width: 200,
  },
  {
    title: '采购价',
    dataIndex: 'purchasePrice',
    key: 'purchasePrice',
    ellipsis: true,
    width: 100,

  },
  {
    title: '分销价',
    dataIndex: 'distributionPrice',
    key: 'distributionPrice',
    ellipsis: true,
    width: 100,

  },
  {
    title: '有效期',
    dataIndex: 'perviodTime',
    key: 'perviodTime',
    ellipsis: true,
  },
 
];

const data = [
  {
    key: '1',
    name: 'John Brown',
    operationTime:'2022-03 13:23:30',
    purchasePrice:100,
    distributionPrice:120,
    perviodTime:'2022年四月2日-2022年四月30日',
    age: 32,
    address: '',
    tags: ['nice', 'developer'],
  },
   {
    key: '2',
    name: 'John Brown',
    operationTime:'2022-03 13:23:30',
    purchasePrice:100,
    distributionPrice:120,
    perviodTime:'2022年四月2日-2022年四月30日',
    age: 32,
    address: '',
    tags: ['nice', 'developer'],
  },
  {
    key: '3',
    name: 'John Brown',
    operationTime:'2022-03 13:23:30',
    purchasePrice:100,
    distributionPrice:120,
    perviodTime:'2022年四月2日-2022年四月30日',
    age: 32,
    address: '',
    tags: ['nice', 'developer'],
  },
 
 
];
export default {
  name: '',
  props: {
  },
  components: {},
  data() {
    return {
      // 控制弹窗显示隐藏的
      visible: false,
      data,
      columns,
    };
  },
  computed: {},
  watch: {},
  created() {
  },
  mounted() {
  },
  methods: {
    showModal() {
      this.visible = true;
    },
    handleOk(e) {
      console.log(e);
      this.visible = false;
    },
    // 弹窗返回
    handleCancel(){
        console.log(' 返回 ----->  ', );
    }
  },
};
</script>
<style scoped lang='less'>
/deep/.ant-modal-content{
    .ant-modal-footer{
    border-top:none;
    margin: 30px 0;
}
}

.pagDevice{
    margin: 20px 0;

}
#components-pagination-demo-mini .ant-pagination:not(:last-child) {
  margin-bottom: 24px;
}
.ant-pagination{
    float: right;
}
</style>